<template>
  <div class="mod-demo-echarts">
    <el-alert type="success" :closable="false">
      <p class="el-alert__description">
        提示：请选择监测参数，可填写机器名称、服务器所属部门，以及将要查询的时间范围
      </p>
    </el-alert>

    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-input
          v-model="dataForm.department"
          placeholder="部门"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="dataForm.machineName"
          placeholder="机器名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="起始日期"
            v-model="dataForm.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="1">—</el-col>
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="结束日期"
            v-model="dataForm.date2"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="J_chartBarBox" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//import echarts from 'echarts'
export default {
  data() {
    return {
      dataForm: {
        department: "",
        machineName: "",
        monitorParam: "",
        date1: "",
        date2: "",
      },
      chartBar: null,
      dataList: [],

      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["温度数据", "烟雾传感", "水浸监测", "红外监测", "湿度数据"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "05-01",
              "05-02",
              "05-03",
              "05-04",
              "05-05",
              "05-06",
              "05-07",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "温度数据",
            type: "bar",
            data: [33, 27, 66, 28, 26, 43, 28],
          },
          {
            name: "烟雾传感",
            type: "bar",
            stack: "广告",
            data: [20, 20, 10, 20, 20, 10, 20],
          },
          {
            name: "水浸监测",
            type: "bar",
            stack: "广告",
            data: [10, 10, 20, 10, 10, 10, 10],
          },
          {
            name: "红外监测",
            type: "bar",
            stack: "广告",
            data: [10, 10, 10, 20, 10, 10, 10],
          },
          {
            name: "湿度数据",
            type: "bar",
            data: [55, 70, 56, 86, 58, 57, 56],
            markLine: {
              lineStyle: {
                normal: {
                  type: "dashed",
                },
              },
              data: [[{ type: "min" }, { type: "max" }]],
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.initChartBar();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug

    if (this.chartBar) {
      this.chartBar.resize();
    }
  },
  methods: {
    getDataList() {
      //console.log("submit!");
      this.option.xAxis.data = [
        "04-01",
        "04-02",
        "04-03",
        "04-04",
        "04-05",
        "04-06",
        "04-07",
      ];
      this.option.series[0].data = [
        Math.floor(Math.random() * 26),
        27,
        Math.floor(Math.random() * 100),
        28,
        26,
        26,
        28,
      ];
      this.option.series[1].data = [10, 10, 20, 20, 10, 10, 10];
      this.option.series[2].data = [10, 20, 10, 20, 20, 10, 10];
      this.option.series[3].data = [
        10,
        20,
        20,
        Math.floor(Math.random() * 15),
        20,
        10,
        10,
      ];
      this.option.series[4].data = [
        55,
        56,
        Math.floor(Math.random() * 56),
        86,
        Math.floor(Math.random() * 58),
        57,
        56,
      ];
      this.initChartBar();
    },
    // 柱状图
    initChartBar() {
      this.chartBar = echarts.init(document.getElementById("J_chartBarBox"));
      this.chartBar.setOption(this.option);

      window.addEventListener("resize", () => {
        this.chartBar.resize();
      });
    },

    getRandom(min, max) {
      //根据最小值和最大值产生一个随机数
      return Math.floor(Math.random() * (max - min) + min);
    },
  },
};
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>
